<template>
	<view class="page">
		
		<view class="header">
			<image class="header-back-icon" src="/static/images/common/back-white.png" @click="page_back"></image>
			<text class="header-title">{{ title }}</text>
		</view>
		<view class="body">
			
			<view class="card-img">广告</view>
			<view class="sorts">
				<!-- 颜色选择 -->
				<view class="sort-seleter">
					<text>综合排序</text>
					<image class="sort-icon" src="@/static/images/common/三角下.png"></image>
				</view>
				<view class="sort-speed">
					<text>速度</text>
					<image class="sort-icon" src="@/static/images/common/三角下.png"></image>
				</view>
				<view class="sort-filter">
					<text>全部筛选</text>
					<image class="sort-icon" src="@/static/images/common/三角下.png"></image>
				</view>
			</view>
			<view class="tags">
				<view>临时标签1</view>
				<view>临时标签2</view>
				<view>临时标签3</view>
				<view>临时标签4</view>
			</view>
			<view class="cards-container">
				<view class="card" v-for="nav_shop_id of nav_data.shop_ids" @click="nav_to_shop(nav_shop_id)">
					<view class="card-left"><view class="card-left-img"></view></view>
					<view class="card-right">
						<text card-title>店名: {{ get_value(nav_shop_id, "shop_name") }}</text>
						<text card-line>评分: {{ get_value(nav_shop_id, "shop_rating") }}分</text>
						<text card-line>销量: {{ get_value(nav_shop_id, "shop_sale_cnt") }}份</text>
						<text card-line>配送费: {{ get_value(nav_shop_id, "delivery_fee") }}元</text>
						<text card-line>类型: {{ props.title }}</text>
					</view>
				</view>
			</view>
			
		</view>
	</view>
	
</template>

<script setup>
	import { onMounted, reactive, ref } from 'vue';
	import { httpGet } from '@/utils/request.js'
	import { page_back } from '@/utils/main.js'
	import { nav_to_shop } from '@/static/scripts/shop.js'

	const props = defineProps(["type", "title"])
	const type = props.type
	const title = ref('')
	const nav_data = reactive({})
	
	onMounted(() => {
		if (type <= 10) { // 导航分类食品
			console.log("type: ", type)
			title.value = `${props.title}区`
			fetchNavData()
		} else {
			title.value = props.title
			// httpGet("")
		}
	})
	
	function fetchNavData() {
		httpGet('/api/get_nav', {"type": type})
		.then((res) => {
			Object.assign(nav_data, res.data.data)
			const data = res.data.data
			console.log("data: ", data)
		})
	}
	
	function get_value(id, key) {
		for (const shop of nav_data.shop_data) {
			if (shop.shop_id == id) return shop[key]
		}
		return "none"
	}
	
</script>

<style>
	@import "@/static/styles/base/page.scss";
	@import "@/static/styles/base/header.scss";
	@import "@/static/styles/shop_list.scss";
</style>
